(function(){
    App.views.BaseTableView = Backbone.View.extend({
        // el与initialize一样是bk的关键字, 不能重命名为其它
        el: 'table.bootstrap-table',
        events: {
            'check.bs.table': 'toggleBatBtn',
            'uncheck.bs.table': 'toggleBatBtn',
            'check-all.bs.table': 'toggleBatBtn',
            'uncheck-all.bs.table': 'toggleBatBtn',
            'load-success.bs.table': 'onLoad',
        },
        baseCols: [
            {field: 'selector', checkbox: true},
            {
                field: 'number', title: '序号', 
                align: 'center', 
                formatter: function(value, row, index){return index + 1;}
            }
        ],
        baseOpts: {
            classes: 'table table-hover table-no-bordered',
            sidePagination: 'server',
            idField: 'id',
            uniqueId: 'id',
            search: true,
            pagination: true,
            paginationVAlign: 'bottom',
            paginationHAlign: 'left',
            paginationDetailHAlign: 'right',
            pageList: [20, 50, 100, 500],
            toolbarAlign: 'left',
            toolbar: '.toolbar',
            striped: false,
            showToggle: true,
            showColumns: true,
            showExport: true,
        },
        opts: {},
        columns: [],
        prepare: function(){
            // $.merge会修改baseCols的值, 我们不希望baseCols被改变, 需要创建一个副本
            // 它只接受两个参数(不能用[]空列表)
            this.columns = $.merge(this.baseCols.concat(), this.columns);

            this.opts.columns = this.columns;
            this.opts = $.extend({}, this.baseOpts, this.opts);
        },
        initialize: function(options) {
            this.eventBus = options.eventBus;
            this.dataModel = options.dataModel;
            this.columns = options.columns;
            this.opts = options.opts;
            this.el = options.el ? options.el : this.el;
            this.prepare();
            this.render();
        },
        render: function(){
            this.$el.bootstrapTable(this.opts);
            this.watch();
            this.listener();
        },
        onLoad: function(data){
            /*
            * 每次表格数据加载成功后, 都重新初始化popover和tooltip组件
            */
            $('.btn-popover', this.$el).popover();
            $('.btn-tooltip', this.$el).tooltip();
        },
        watch: function(){
            this.$el.on('click', '.btn-edit-inline', this.editInline.bind(this));
            this.$el.on('click', '.btn-del-inline', this.delInline.bind(this));

            this.$el.on('mouseenter', 'a.btn-popover', function () {
                var _this = this;
                $(this).popover('show');
                $(this).siblings(".popover").on("mouseleave", function () {
                    $(_this).popover('hide');
                });
            }).on('mouseleave', 'a.btn-popover', function () {
                var _this = this;
                // 100ms缓冲时间, 如果100ms后依然没有悬停在.popover元素上, 就隐藏
                setTimeout(function(){
                    if(!$('.popover:hover').length) {
                        $(_this).popover('hide');
                    }
                }, 100);
            });
        },
        editInline: function(event){},
        delInline: function(event){
            var idx = $(event.target).parents('tr').attr('data-index');
            var data = this.$el.bootstrapTable('getData')[idx];
            this.dataModel.set({id: data.id}).delete();
        },
        listener: function(){},
        toggleBatBtn: function(row, $element){
            var selectedLines = this.$el.bootstrapTable('getSelections');
            var toolbar = $(this.opts.toolbar || this.baseOpts.toolbar);
            var batBtn = toolbar.find('.btn-bat-processing');
            if(selectedLines.length >= 1) batBtn.removeClass('hidden');
            else batBtn.addClass('hidden');
        }
    });
})();
